<template>
  <view style="padding: 0 50rpx;">
    <!-- 占位栏，模拟出标题状态栏高度 -->
    <uni-nav-bar backgroundColor="#fafafa" :fixed="true" :statusBar="true" :border="false"></uni-nav-bar>

    <view class="top-box">
      <!-- 左上角叉叉图标 -->
      <image class="back-icon" src="/static/loginView/back.png" @click="backPage"></image>
      <!-- 标题 -->
      <view class="title">注册</view>
    </view>

    <uni-forms ref="form" :modelValue="user" :rules="rules">
      
      <uni-forms-item label="昵称" name="username" :labelWidth="80" :required="true">
        <uni-easyinput v-model="user.username" :trim="true" confirmType="next" :maxlength="24" placeholder="至少2位"
          @blur="blur('username')" />
      </uni-forms-item>
      
      <uni-forms-item label="性别" name="sexLocaldata" :labelWidth="80" :required="true">
        <uni-data-select :localdata="sexLocaldata" v-model="user.sex" :clear="false"></uni-data-select>
      </uni-forms-item>
      
      <uni-forms-item label="学号" name="studentId" :labelWidth="80" :required="true">
        <uni-easyinput v-model="user.studentId" :trim="true" confirmType="next" type="number" :maxlength="24"
          placeholder="只能是数字,至少4位" @blur="blur('studentId')" />
      </uni-forms-item>
      
      <uni-forms-item label="院系" name="department" :labelWidth="80" :required="true">
        <uni-data-select :localdata="departmentLocaldata" v-model="user.department" :clear="false">
        </uni-data-select>
      </uni-forms-item>
      
      <uni-forms-item label="手机号码" name="phoneNumber" :labelWidth="80" :required="true">
        <uni-easyinput type="number" :maxlength="11" :trim="true" confirmType="next" v-model="user.phoneNumber"
          placeholder="只能是数字,11位的手机号码" @blur="blur('phoneNumber')" />
      </uni-forms-item>
      
      <uni-forms-item label="密码" name="password" :labelWidth="80" :required="true">
        <uni-easyinput v-model="user.password" :trim="true" confirmType="next" type="password" :maxlength="16"
          placeholder="字母数字混合至少8位" @blur="blur('password')" />
      </uni-forms-item>
      <!-- 重复密码 -->
      <uni-forms-item label="重复密码" name="passwordCopy" :labelWidth="80" :required="true">
        <uni-easyinput v-model="user.passwordCopy" :trim="true" confirmType="done" type="password" :maxlength="16"
          placeholder="重复输入一次密码" @blur="blur('passwordCopy')" />
      </uni-forms-item>
    </uni-forms>

    <view class="register-button-box">
      <button class="register-button" @click="nextPage">下一步，继续完善信息</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        user: {
          username: '',
          password: '',
          passwordCopy: '', // 重复密码字段，不发送后端
          sex: '0',
          studentId: '',
          department: '',
          phoneNumber: ''
        },
        // from表单校验规则
        rules: {
          // 对username字段进行必填验证
          username: {
            // username 字段的校验规则
            rules: [
              // 校验 username 不能为空
              {
                required: true,
                errorMessage: '请填写昵称',
              },
              // 对username字段进行长度验证
              {
                minLength: 2,
                maxLength: 24,
                errorMessage: '昵称长度在 {minLength} 到 {maxLength} 个字符',
              }
            ],
          },
          studentId: {
            rules: [{
                required: true,
                errorMessage: '请填写学号',
              },
              {
                minLength: 4,
                maxLength: 24,
                errorMessage: '学号长度在 {minLength} 到 {maxLength} 个字符',
              }
            ],
          },
          department: {
            rules: [{
              required: true,
              errorMessage: '请选择一个院系',
            }],
          },
          phoneNumber: {
            rules: [{
                required: true,
                errorMessage: '请填写手机号码',
              },
              {
                pattern: /^[1]([3-9])[0-9]{9}$/,
                errorMessage: '手机号不合法',
              }
            ],
          },
          password: {
            rules: [{
                required: true,
                errorMessage: '请填写密码',
              },
              {
                minLength: 8,
                maxLength: 16,
                errorMessage: '密码长度必须为 {minLength} - {maxLength} 位字符',
              },
              {
                pattern: /(?=.*[0-9]).{8,16}/,
                errorMessage: '密码必须包含数字',
              },
              {
                pattern: /(?=.*[a-zA-Z]).{8,16}/,
                errorMessage: '密码必须包含字母',
              }
            ],
          },
          passwordCopy: {
            rules: [{
                required: true,
                errorMessage: '请填写重复密码',
              },
              {
                validateFunction: function(rule, value, data, callback) {
                  if (data.password != value) {
                    callback('两次密码输入不一致')
                  }
                  return true
                }
              }
            ],
          }
        },
        // sex性别下拉框数据
        sexLocaldata: [{
            text: '男',
            value: '0'
          },
          {
            text: '女',
            value: '1'
          }
        ],
        // department院系下拉框数据
        departmentLocaldata: [{
          text: '电子信息工程学院',
          value: '电子信息工程学院'
        }, {
          text: '建筑工程学院',
          value: '建筑工程学院'
        }, {
          text: '文化传播学院',
          value: '文化传播学院'
        }, {
          text: '农业工程学院',
          value: '农业工程学院'
        }, {
          text: '机电工程学院',
          value: '机电工程学院'
        }, {
          text: '汽车学院',
          value: '汽车学院'
        }, {
          text: '会计学院',
          value: '会计学院'
        }, {
          text: '艺术设计学院',
          value: '艺术设计学院'
        }, {
          text: '经济管理学院',
          value: '经济管理学院'
        }]
      };
    },
    methods: {
      // 返回上一个页面
      backPage() {
        uni.navigateBack()
      },
      //输入框失去焦点时触发
      blur(name) {
        if (name == 'username') {
          return this.$refs.form.validateField(['username'])
        }
        if (name == 'studentId') {
          return this.$refs.form.validateField(['username', 'studentId'])
        }
        if (name == 'phoneNumber') {
          return this.$refs.form.validateField(['username', 'studentId', 'department', 'phoneNumber'])
        }
        if (name == 'password') {
          return this.$refs.form.validateField(['username', 'studentId', 'department', 'phoneNumber', 'password'])
        }
        if (name == 'passwordCopy') {
          return this.$refs.form.validateField(['username', 'studentId', 'department', 'phoneNumber', 'password',
            'passwordCopy'
          ])
        }
      },
      // 跳转下一步页面
      nextPage() {
        this.$refs.form.validate().then(res => {
          console.log('表单数据信息：', JSON.stringify(res));
          uni.navigateTo({
            url: `./registerViewDetail/registerViewDetail?user=${JSON.stringify(this.user)}`
          })
        }).catch(err => {
          console.log('表单错误信息：', JSON.stringify(err));
        })
      }
    }
  }
</script>

<style lang="scss">
  // 顶部容器
  .top-box {
    display: flex;
    align-items: center;
    margin-bottom: 70rpx;

    // 左上角叉叉图标
    & .back-icon {
      width: 80rpx;
      height: 80rpx;
    }

    // 标题
    & .title {
      font-size: 30px;
      margin-left: 180rpx;
    }
  }



  // 注册按钮容器
  .register-button-box {
    margin-top: 100rpx;

    // 注册按钮
    & .register-button {
      color: #fff;
      width: 100%;
      background: #000;
    }
  }
</style>
